<template>
  <div class="fullscreen-search">
    <!-- 顶部固定区域 -->
    <div class="search-header">
      <HeaderComponents/>

      <!-- 搜索选项卡按钮（始终显示） -->
      <div class="search-tabs">
        <button
            :class="{ active: activeTab === 0 }"
            @click="changeTab(0)"
        >综合</button>
        <button
            :class="{ active: activeTab === 1 }"
            @click="changeTab(1)"
        >用户</button>
        <button
            :class="{ active: activeTab === 2 }"
            @click="changeTab(2)"
        >内容</button>
        <button
            :class="{ active: activeTab === 3 }"
            @click="changeTab(3)"
        >热点</button>
      </div>
    </div>

    <!-- 可滚动的搜索结果区域 -->
    <div class="search-results-container">
      <div class="search-results" v-if="hasSearched">
        <div v-if="loading" class="loading">搜索中...</div>
        <div v-else-if="noResults" class="no-results">
          未找到"{{ keyword }}"相关结果
        </div>
        <div v-else>
          <!-- 综合搜索结果 -->
          <div v-if="activeTab === 0" class="result-section">
            <h3>综合结果 ({{ combinedResults.length }})</h3>

            <!-- 用户结果 -->
            <div class="sub-section" v-if="userResults.length > 0">
              <h4>用户</h4>
              <div v-for="(user, index) in userResults" :key="'user-'+index" class="user-card">
                <div class="avatar"></div>
                <div class="user-info">
                  <h4>{{ user.username }}</h4>
                  <p>{{ user.email }}</p>
                </div>
              </div>
            </div>

            <!-- 内容结果 -->
            <div class="sub-section" v-if="contentResults.length > 0">
              <h4>内容</h4>
              <div v-for="(post, index) in contentResults"
                   :key="'post-'+index"
                   class="post-card"
                  @click="jumpToContentDetail(post.ctid)"
              >
                <h4>{{ post.title }}</h4>
                <p class="content">{{ post.summary }}</p>
                <div class="meta">
                  <span>时间: {{ formatDate(post.publishTime) }}</span>
                </div>
              </div>
            </div>

            <!-- 热点结果 -->
            <div class="sub-section" v-if="hotResults.length > 0">
              <h4>热点</h4>
              <div v-for="(hot, index) in hotResults" :key="'hot-'+index" class="post-card"
                   @click="jumpToContentDetail(hot.ctid)"
              >
                <h4>{{ hot.title }}</h4>
              </div>
            </div>
          </div>

          <!-- 用户搜索结果 -->
          <div v-if="activeTab === 1" class="result-section">
            <h3>用户 ({{ userResults.length }})</h3>
            <div v-for="(user, index) in userResults" :key="'user-'+index" class="user-card">
              <div class="avatar"></div>
              <div class="user-info">
                <h4>{{ user.username }}</h4>
                <p>{{ user.email }}</p>
                <div class="meta">
                  <span>注册时间: {{ formatDate(user.registerTime) }}</span>
                </div>
              </div>
            </div>
          </div>

          <!-- 内容搜索结果 -->
          <div v-if="activeTab === 2" class="result-section">
            <h3>内容 ({{ contentResults.length }})</h3>
            <div v-for="(post, index) in contentResults" :key="'post-'+index" class="post-card"
                 @click="jumpToContentDetail(post.ctid)">
              <h4>{{ post.title }}</h4>
              <p class="content">{{ post.summary }}</p>
              <div class="meta">
                <span>时间: {{ formatDate(post.publishTime) }}</span>
              </div>
            </div>
          </div>

          <!-- 热点搜索结果 -->
          <div v-if="activeTab === 3" class="result-section">
            <h3>热点 ({{ hotResults.length }})</h3>
            <div v-for="(hot, index) in hotResults" :key="'hot-'+index" class="post-card">
              <h4>{{ hot.title }}</h4>
              <div class="meta">
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { searchService } from '@/api/search';
import SearchInput from '@/components/SearchInput.vue';
import HeaderComponents from "@/components/HeaderComponents.vue";

export default {
  props: ['keyword'], // 接收路由传递的关键词
  components: {
    HeaderComponents,
    SearchInput
  },
  data() {
    return {
      keyword: '',
      activeTab: 0, // 0-综合, 1-用户, 2-内容, 3-热点
      hasSearched: false,
      loading: false,
      noResults: false,
      userResults: [], // 用户搜索结果
      contentResults: [], // 内容搜索结果
      hotResults: [] // 热点搜索结果
    }
  },
  watch: {
    // 监听关键词变化
    keyword(newVal) {
      if (newVal) {
        this.handleSearch(newVal);
      }
    },
    // 添加路由变化监听
    '$route.query': {
      handler(newQuery) {
        if (newQuery.keyword) {
          this.keyword = newQuery.keyword;
          this.handleSearch(newQuery.keyword);
        }
      },
      immediate: true
    }
  },
  mounted() {
    // 组件加载时如果有关键词则执行搜索
    if (this.keyword) {
      this.handleSearch(this.keyword);
    }
  },
  computed: {
    // 综合搜索结果
    combinedResults() {
      return [...this.userResults, ...this.contentResults, ...this.hotResults];
    }
  },
  methods: {
    jumpToContentDetail(ctid) {
      this.$router.push({
        path: '/content',
        query: { ctid }
      });
    },
    // 调用后端搜索接口
    async fetchSearchResults(type) {
      return await searchService.unifiedSearch(type, this.keyword);
    },

    // 处理搜索
    async handleSearch(keyword) {
      this.keyword = keyword;

      if (!this.keyword.trim()) {
        this.hasSearched = false;
        this.noResults = false;
        return;
      }

      this.loading = true;
      this.hasSearched = true;

      try {
        // 根据当前激活的标签页获取不同类型的结果
        if (this.activeTab === 0) {
          // 综合搜索 - 获取所有类型结果
          const [users, contents, hots] = await Promise.all([
            this.fetchSearchResults(1), // 用户
            this.fetchSearchResults(2), // 内容
            this.fetchSearchResults(3)  // 热点
          ]);
          this.userResults = users;
          this.contentResults = contents;
          this.hotResults = hots;
        } else if (this.activeTab === 1) {
          // 用户搜索
          this.userResults = await this.fetchSearchResults(1);
          this.contentResults = [];
          this.hotResults = [];
        } else if (this.activeTab === 2) {
          // 内容搜索
          this.contentResults = await this.fetchSearchResults(2);
          this.userResults = [];
          this.hotResults = [];
        } else if (this.activeTab === 3) {
          // 热点搜索
          this.hotResults = await this.fetchSearchResults(3);
          this.userResults = [];
          this.contentResults = [];
        }

        this.noResults = this.combinedResults.length === 0;
      } catch (error) {
        console.error('搜索出错:', error);
        this.noResults = true;
      } finally {
        this.loading = false;
      }
    },

    // 切换标签页
    async changeTab(tab) {
      this.activeTab = tab;
      if (this.keyword.trim()) {
        await this.handleSearch(this.keyword);
      } else {
        // 清空结果
        this.userResults = [];
        this.contentResults = [];
        this.hotResults = [];
      }
    },

    // 格式化日期
    formatDate(dateStr) {
      if (!dateStr) return '';
      try {
        const date = new Date(dateStr);
        return date.toLocaleDateString() + ' ' + date.toLocaleTimeString();
      } catch (e) {
        console.error('日期格式化错误:', e);
        return dateStr;
      }
    }
  }
}
</script>

<style scoped>
/* 全屏容器 */
.fullscreen-search {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 0;
  background-color: #f5f7fa;
  overflow: hidden;
  font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
  display: flex;
  flex-direction: column;
}

/* 顶部固定区域 */
.search-header {
  background-color: #f5f7fa;
  z-index: 100;
  padding-bottom: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

/* 顶部居中容器 */
.top-center-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 30px;
  margin-bottom: 20px;
  width: 100%;
  position: relative;
}

/* Logo样式 */
.logo {
  font-size: 32px;
  font-weight: bold;
  color: #2f80ed;
  margin-bottom: 20px;
}

/* 右上角导航菜单 */
.top-right-nav {
  position: absolute;
  top: 24px;
  right: 24px;
  display: flex;
  gap: 20px;
  z-index: 10;
}

.top-right-nav a {
  color: #333;
  text-decoration: none;
  font-size: 16px;
  padding: 8px 12px;
  border-radius: 4px;
  transition: all 0.3s;
}

.top-right-nav a:hover {
  background-color: #f0f0f0;
  color: #2f80ed;
}

/* 搜索选项卡按钮 */
.search-tabs {
  display: flex;
  justify-content: center;
  margin: 0 0 10px;
  padding: 0 20px;
}

.search-tabs button {
  padding: 8px 16px;
  margin: 0 10px;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  font-size: 16px;
  color: #666;
  transition: all 0.3s;
}

.search-tabs button:hover {
  color: #2f80ed;
}

.search-tabs button.active {
  color: #2f80ed;
  border-bottom-color: #2f80ed;
  font-weight: bold;
}

/* 可滚动的搜索结果容器 */
.search-results-container {
  flex: 1;
  overflow-y: auto;
  padding-top: 10px;
}

/* 搜索结果区域 */
.search-results {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 20px 40px;
}

.loading, .no-results {
  text-align: center;
  padding: 40px;
  color: #666;
}

.result-section {
  margin-bottom: 30px;
}

/* 综合结果中的子部分 */
.sub-section {
  margin-bottom: 30px;
}

.sub-section h4 {
  margin-bottom: 15px;
  padding-bottom: 8px;
  border-bottom: 1px solid #eee;
  color: #555;
}

.user-card, .post-card {
  padding: 15px;
  border: 1px solid #eee;
  border-radius: 8px;
  margin-bottom: 15px;
  background: white;
  transition: transform 0.2s;
}

.user-card:hover, .post-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
}

.user-card {
  display: flex;
  align-items: center;
}

.avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: #f0f0f0;
  margin-right: 15px;
  background-image: linear-gradient(45deg, #f5f7fa, #e4e8eb);
}

.user-info h4 {
  margin: 0 0 5px 0;
  color: #333;
}

.post-card h4 {
  margin: 0 0 10px 0;
  color: #333;
}

.content {
  color: #666;
  margin-bottom: 10px;
  line-height: 1.6;
}

.stats, .meta {
  font-size: 14px;
  color: #999;
}

.stats span, .meta span {
  margin-right: 15px;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .top-center-container {
    padding-top: 20px;
    margin-bottom: 15px;
  }

  .logo {
    font-size: 28px;
    margin-bottom: 15px;
  }

  .top-right-nav {
    gap: 15px;
    right: 20px;
  }

  .top-right-nav a {
    font-size: 15px;
    padding: 7px 10px;
  }

  .search-tabs {
    margin: 0 0 5px;
  }
}

@media (max-width: 480px) {
  .top-center-container {
    padding-top: 15px;
    margin-bottom: 10px;
  }

  .logo {
    font-size: 24px;
    margin-bottom: 12px;
  }

  .top-right-nav {
    display: none;
  }

  .search-tabs {
    flex-wrap: wrap;
    margin: 0 0 5px;
  }

  .search-tabs button {
    margin: 4px;
    padding: 6px 10px;
    font-size: 13px;
  }

  .search-results {
    padding: 0 10px 20px;
  }
}

.nav-links {
  display: flex;
  gap: 32px;
  margin: 0 auto; /* 导航项居中 */
}
.nav-links a {
  text-decoration: none;
  color: #666;
  font-size: 1rem;
  transition: color 0.3s;
}
.nav-links a:hover,
.nav-links a.active {
  color: var(--primary);
}
</style>